<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- BEGIN HEAD -->

<head>

	<meta charset="utf-8" />

	<title><{:L('hjjp_title')}> | <{:L('my')}><{:L('profile')}> | <{:L('changePasswd')}></title>

	<meta content="width=device-width, initial-scale=1.0" name="viewport" />

	<meta content="" name="description" />

	<meta content="" name="author" />

	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style-metro.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style-responsive.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/<{$ctype}>.css" rel="stylesheet" type="text/css" id="style_color"/>

	<link href="__PUBLIC__/css/uniform.default.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/scojs.css" rel="stylesheet" type="text/css"/>
	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES -->
	

	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="__PUBLIC__/image/favicon.ico" />

</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body class="page-header-fixed">
	
	<include file="Public/header" />

	  	<include file="Public/nav" />
	  	
			<!-- BEGIN PAGE TITLE & BREADCRUMB-->

						<h3 class="page-title">

							<{:L('my')}><{:L('profile')}>  <small><{:L('changePasswd')}></small>

						</h3>

						<ul class="breadcrumb">

							<li>

								<i class="icon-home"></i>

								<a href="__ROOT__/Index/index.html"><{:L('home')}></a> 

								<i class="icon-angle-right"></i>

							</li>

							<li>

								<a href="#"><{:L('my')}><{:L('profile')}></a>

								<i class="icon-angle-right"></i>

							</li>

							<li><a href="#"><{:L('changePasswd')}></a></li>

						</ul>

						<!-- END PAGE TITLE & BREADCRUMB-->

					</div>

				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->

				<div class="row-fluid">

					<div class="span12">
						
						<div class="portlet box light-grey">

							<div class="portlet-title">

								<div class="caption"><i class="icon-lock"></i><{:L('changePasswd')}></div>

								<div class="tools">

									<a href="javascript:;" class="collapse"></a>

								</div>

							</div>

							<div class="portlet-body">
								
								<if condition="$errorMsg neq ''">
									<div class="alert alert-error errorMsg">
								
										<button class="close" data-dismiss="alert"></button>
								
										<span><{$errorMsg}></span>
								
									</div>
								</if>

								<div class="tab-pane row-fluid profile-account">

									<div class="row-fluid">

										<div class="span4"></div>

										<div class="span8">

											<form action="__ROOT__/Set/changepwd" method="post" id="changepwd">
												
												<div class="control-group">
	
													<label class="control-label"><{:L('currentPasswd')}></label>
			
													<div class="controls">
			
														<input type="password" name="currentpassword" id="currentpassword" class="m-wrap span6" />
			
													</div>
			
												</div>

												<div class="control-group">
	
													<label class="control-label"><{:L('newPasswd')}></label>
			
													<div class="controls">
			
														<input type="password" name="newpassword" id="newpassword" class="m-wrap span6" />
			
													</div>
			
												</div>
												
												<div class="control-group">
	
													<label class="control-label"><{:L('confirmPasswd')}></label>
			
													<div class="controls">
			
														<input type="password" name="confirmpassword" id="confirmpassword" class="m-wrap span6" />
			
													</div>
			
												</div>

												<div class="submit-btn">

													<button type="submit" class="btn green"><{:L('save')}></button>&nbsp;&nbsp;

													<button type="button" class="btn"><{:L('cancle')}></button>

												</div>

											</form>                                

										</div>

									</div>

								</div>
								
							</div>

						</div>

					</div>

				</div>
				<!-- END PAGE CONTENT-->

			</div>

			<!-- END PAGE CONTAINER-->

		</div>

		<!-- END PAGE -->

	</div>

	<!-- END CONTAINER -->
	
	<include file="Public/footer" />

	<!-- BEGIN PAGE LEVEL SCRIPTS -->

	<script src="__PUBLIC__/js/app.js"></script>
	   

	<script>

		jQuery(document).ready(function() {       

			App.init();
		   
		   	$('#changepwd').validate({
		  		errorElement: 'span', //default input error message container
                errorClass: 'help-inline', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",
                rules: {
                	currentpassword: {
                		required: true,
                		minlength: 6
                	},
                	newpassword: {
                		required: true,
                		minlength: 6
                	},
                	confirmpassword: {
                		required: true,
                		equalTo: '#newpassword'
                	}
                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.help-inline').removeClass('ok'); // display OK icon
                    $(element)
                        .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
                },

                unhighlight: function (element) { // revert the change dony by hightlight
                    $(element)
                        .closest('.control-group').removeClass('error'); // set error class to the control group
                },

                success: function (label) {
                    label
                        .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
                    .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
                },

                submitHandler: function (form) {
                    form.submit();
                }
		   	});
		   
		});

	</script>
	

<script type="text/javascript">  
//var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-37564768-1']);  _gaq.push(['_setDomainName', 'keenthemes.com']);  _gaq.push(['_setAllowLinker', true]);  _gaq.push(['_trackPageview']);  
//(function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();
</script>

</body>

<!-- END BODY -->

</html>